<template>
  <el-divider />
   <p style="font-weight: 500;">药库管理</p>
   <el-divider />
 <div>
  
   <el-row>
     <el-col :span="24">
       <el-form :inline="true" :model="storage" class="demo-form-inline">
         <el-form-item label="编码/名称">
           <el-input
             style="width: 240px"
             v-model="storage.value"
             placeholder="请输入"
             clearable
           />
         </el-form-item>
         <el-form-item label="分类">
           <el-select
             v-model="storage.drugType"
             placeholder="请选择"
             style="width: 240px"
             clearable
           >
             <el-option label="中成药" value="中成药" />
             <el-option label="西药" value="西药" />
             <el-option label="中草药" value="中草药" />
           </el-select>
         </el-form-item>

         <el-form-item>
           <el-button type="primary" @click="hanlderSearch">查询</el-button>
         </el-form-item>
       </el-form>
     </el-col>
   </el-row>
   <el-row>
     <el-col :span="24">
       <el-form-item >
         <el-button  @click="transfer()" type="primary"  :icon="Plus" style="width: 200px"
           >添加新药物</el-button
         >
         <el-button
           type="primary"
           style="margin-left: 50px; width: 200px"
           :icon="Plus"
           >导入新药物</el-button
         >
       </el-form-item>
     </el-col>
   </el-row>
   <template v-if="isShow">
     <drug-storage-add >
     
     </drug-storage-add>
   </template>
   <template v-else>
       <drug-storage-table :storageData="tableData"></drug-storage-table>
       <el-pagination
         @current-change="handleCurrentChange"
         style="margin-top: 15px"
         layout="prev, pager, next ,total,jumper,sizes"
         v-model:currentPage="currentPage"
         v-model:page-size="pageSize"
         :page-sizes="[5, 10, 15]"
         :total="total"
       />
   </template>
  
 </div>
</template>
<script setup>
import { reactive,ref } from "vue";
import { Plus  } from '@element-plus/icons-vue'
import DrugStorageAdd from '@/drugstore/drug_storage_add.vue'
import DrugStorageTable  from '@/drugstore/drug_storage_table.vue'
import axios from "axios"
let tableData=ref([])
let currentPage = ref(1)
let pageSize  =ref(5)
let total =ref(100);
const isShow=ref(false);
const transfer =()=>{
 isShow.value=true;
}

const hanlderSearch=()=>{
 isShow.value=false;//查询时应该让添加库存的组件隐藏
 //调用后端接口 查询库存
 axios.get(`/drugstore/api/storage/getStoargeInfoByCondition/${storage.value}/${storage.drugType}/${pageSize.value}/${currentPage.value}`)
 .then(resp=>{
   console.log(resp.data)
   tableData.value=resp.data.results.list;
   total.value=resp.data.results.total;
 }).catch(e=>{
   console.log(e);
 })
}

const storage = reactive({
 value: " ",
 drugType: "中草药",
});
hanlderSearch();
</script>
<style scoped></style>
